<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="eyeSocket eyeSocketSleeping" id='bigEye'>
        <div id="eyeball"></div>
    </div>
    <div class="filter">
        <div class="eyeSocket" id='eyeFilter'>
        </div>
    </div>
    <!-- Svg滤镜 -->
    <svg width="0">
        <filter id='filter'>
            <feTurbulence baseFrequency="1">
                <animate id="animate1" attributeName="baseFrequency" dur="1s" from="0.5" to="0.55" begin="0s;animate1.end">
                </animate>
                <animate id="animate2" attributeName="baseFrequency" dur="1s" from="0.55" to="0.5" begin="animate2.end">
                </animate>
            </feTurbulence>
            <feDisplacementMap in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="B" />
        </filter>
    </svg>
    <script src="./echarts.min.js"></script>
    <script src="./index.js"></script>
</body>
</html>